<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">初盘功能</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-sm" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <q-stepper v-model="$d.workStep" ref="stepper" color="primary" flat :header-nav="false">
      <q-step :name="1" title="盘点计划" icon="note" :done="$d.workStep>1">
        <div class="q-pt-sm shadow-2">
          <q-table :columns="$d.columnsInfo1" :rows="$d.tableData1" :hide-pagination="true" :loading="listDataLoadingState1"
            v-model:pagination="$d.paginationInfo" v-model:selected="$d.selected1" binary-state-sort @update:selected="onSelection1"
            color="primary" dense flat hide-selected-banner row-key="planId" selection="single" separator="cell" style="max-height: 600px">
            <!--状态列插槽-->
            <template v-slot:body-cell-planState="props">
              <q-td :props="props" auto-width>
                <q-badge :color="fx.fmt.fmtPlanLineStateColor(props.row.planState)" :label="fx.fmt.fmtPlanLineState(props.row.planState)" />
              </q-td>
            </template>
            <!--无数据提示-->
            <template v-slot:no-data>
              <div class="full-width items-center justify-center row">
                <q-icon name="error_outline" /> 无数据 <q-btn flat icon="refresh" :loading="listDataLoadingState1"
                :disable="listDataLoadingState1" dense title="刷新" size="sm" class="q-ml-sm" @click="loadListData1"></q-btn>
              </div>
            </template>
          </q-table>
        </div>
      </q-step>
      <q-step :name="2" title="储位通道" icon="all_inbox" :done="$d.workStep>2">
        <div class="q-pt-sm shadow-2">
          <q-table :columns="$d.columnsInfo2" :rows="$d.locCountByXPositionList" :hide-pagination="true"
            v-model:pagination="$d.paginationInfo" v-model:selected="$d.selected2" binary-state-sort @update:selected="onSelection2"
            color="primary" dense flat hide-selected-banner row-key="xPosition" selection="single" separator="cell" style="max-height: 600px">
            <!--无数据提示-->
            <template v-slot:no-data>
              <div class="full-width items-center justify-center row">
                <q-icon name="error_outline" /> 无数据
              </div>
            </template>
          </q-table>
        </div>
        <div class="q-mt-sm">
          <q-icon color="red" name="fas fa-asterisk" />
          <span>盘点储位数量</span>
          <q-input :hide-bottom-space="true"
            dense :maxlength="40" no-error-icon outlined square stack-label :readonly="listDataLoadingState2"
            v-model="$d.countingLocNumber" @keyup.enter="onCountingLocNumberEntered"
            :error="v$2.countingLocNumber.$error" :error-message="e$(v$2.countingLocNumber.$errors)">
            <template v-slot:after>
              <q-btn style="width:40px" color="primary" dense @click="onCountingLocNumberEntered" :disable="!$d.countingLocNumber">
                <q-icon name="keyboard_return" :loading="listDataLoadingState2" />
              </q-btn>
            </template>
          </q-input>
        </div>
      </q-step>
      <q-step :name="3" title="储位确认" icon="all_inbox" :done="$d.workStep>3">
        <div class="q-mt-sm">
          <span>待盘点储位编号</span>
          <q-input dense outlined square stack-label readonly v-model="$d.loc" />
        </div>
        <div class="q-mt-sm">
          <q-icon color="red" name="fas fa-asterisk" />
          <span>储位</span>
          <easy-input v-model="$d.form.loc" @focus="fx.ui.select" autofocus
            :error="v$3.loc.$error" :error-message="e$(v$3.loc.$errors)" :readonly="listDataLoadingState3"
            :ref="el=>focusHelper.regRef(el, 1)" @keyup.enter="focusHelper.onEntered(1)"/>
        </div>
        <div class="q-mt-sm">
          <q-icon color="red" name="fas fa-asterisk" />
          <span>栈板</span>
          <q-input :hide-bottom-space="true" dense :maxlength="40" no-error-icon outlined square stack-label
            v-model="$d.form.palletNo" @keyup.enter="onPalletNoEntered"
            :readonly="listDataLoadingState3" :ref="el=>focusHelper.regRef(el, 2)"
            :error="v$3.palletNo.$error" :error-message="e$(v$3.palletNo.$errors)">
            <template v-slot:after>
              <q-btn style="width:40px" color="primary" dense @click="onPalletNoEntered" :disable="!$d.form.palletNo">
                <q-icon name="keyboard_return" :loading="listDataLoadingState3" />
              </q-btn>
            </template>
          </q-input>
        </div>
      </q-step>
      <q-step :name="4" title="盘点" icon="all_inbox">
        <div class="q-pt-sm">
          <q-table :columns="columnsInfo4" :rows="$d.invLocInfoForInvCounting" :hide-pagination="true"
            :pagination="$d.paginationInfo" binary-state-sort style="max-height: 600px"
            color="primary" dense flat hide-selected-banner separator="cell">
            <!--无数据提示-->
            <template v-slot:no-data>
              <div class="full-width items-center justify-center row">
                <q-icon name="error_outline" /> 无数据
              </div>
            </template>
          </q-table>
        </div>
        <div class="q-pt-sm">
          <q-btn class="full-width" color="primary" label="完成盘点" @click="onCompleteCountingWarning" :loading="submittingState"/>
        </div>
        <div class="q-pt-sm">
          <span>二维码扫码</span>
          <easy-input v-model="$d.QRCode" @focus="fx.ui.select" autofocus ref="qrCode"
            :readonly="getSkuState" @keyup.enter="deQRCode" :maxlength="300"
            :error="v$5.QRCode.$error" :error-message="e$(v$5.QRCode.$errors)"/>
        </div>
        <div class="q-pt-sm">
          <span>批号或外部批号</span>
          <easy-input v-model="$d.form.lotOrVLot" @focus="fx.ui.select" ref="lotOrVLot"
            :error="v$4.lotOrVLot.$error" :error-message="e$(v$4.lotOrVLot.$errors)" :readonly="getSkuState"
            @keyup.enter="onLotOrVLotEntered"/>
        </div>
        <div class="q-pt-sm">
          <span>料号</span>
          <q-input :hide-bottom-space="true" dense outlined square stack-label v-model="$d.sku" readonly />
        </div>
        <div class="q-pt-sm">
          <span>盘点数量</span> <span v-if="(String($d.invQty) !== $d.form.countingQty) && $d.form.countingQty" style="color: #F2C037">(盘点数量和系统不一致)</span>
          <span v-else-if="(String($d.invQty) === $d.form.countingQty) && $d.form.countingQty" style="color: #21BA45">(数量一致)</span>
          <q-input  :hide-bottom-space="true" dense ref="countingQty"
            clearable no-error-icon outlined square stack-label v-model="$d.form.countingQty" @focus="fx.ui.select"
            @keyup.enter="onCountingQtyEntered" :readonly="listDataLoadingState4"
            :error="v$4.countingQty.$error" :error-message="e$(v$4.countingQty.$errors)">
            <template v-slot:after>
              <q-btn style="width:40px" color="primary" dense @click="onCountingQtyEntered" :disable="!$d.form.countingQty">
                <q-icon name="keyboard_return" :loading="listDataLoadingState4" />
              </q-btn>
            </template>
          </q-input>
        </div>
      </q-step>
      <template v-slot:navigation>
        <div class="row q-pt-md q-col-gutter-sm">
          <!-- Step1的按钮 -->
          <div class="offset-6 col-6" v-show="$d.workStep===1">
            <q-btn class="full-width" color="primary" icon-right="arrow_forward"
              label="下一步" @click="onNext1($d.stepToSkip)" :disable="!$d.stepToSkip || ($d.selected1.length === 0)" />
          </div>
          <!-- Step2的按钮 -->
          <div class="col-6" v-show="$d.workStep===2">
            <q-btn class="full-width" color="primary" icon="arrow_back" label="上一步" outline @click="$d.workStep=1" />
          </div>
          <div class="col-6" v-show="$d.workStep===2">
            <q-btn class="full-width" color="primary" icon-right="arrow_forward" label="下一步" @click="$d.workStep=3" :disable="!$d.loc"/>
          </div>
          <!-- Step3的按钮 -->
          <div class="col-6" v-show="$d.workStep===3">
            <q-btn class="full-width" color="primary" icon="arrow_back" label="上一步" outline @click="onPrevious" />
          </div>
          <div class="col-6" v-show="$d.workStep===3">
            <q-btn class="full-width" color="primary" icon-right="arrow_forward" label="下一步" @click="$d.workStep=4" :disable="$d.invLocInfoForInvCounting.length === 0"/>
          </div>
          <!-- Step4的按钮 -->
          <div class="col-6" v-show="$d.workStep===4">
            <q-btn class="full-width" color="primary" icon="arrow_back" label="上一步" outline @click="$d.workStep=3" />
          </div>
        </div>
      </template>
    </q-stepper>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'WmCountingStd'
}
</script>
<script lang="ts" setup>
import {computed, nextTick, reactive, ref} from 'vue'
import {playBeepSound, playErrorSound, playSuccessSound} from '@njt/wms/helper/audio'
import {WmInvCountingPlan} from '@njt/wms/defs/inventory/counting'
import {
  InvLocInfoForInvCounting,
  InvLocsForCountingReturnInfo,
  LocCountByXPosition,
  NoCountingXPositionLocInfo,
} from '../../defs/counting'
import useVuelidate from '@vuelidate/core'
import {useFocusNextHelper} from '@njt/foundation/hooks/focusHelper'
import {QInput} from 'quasar'
import _ from 'lodash'

let $d = reactive({
  isQREnter: false,
  QRCode: '',
  // 作业步骤
  workStep: 1,
  // workStep1 表数据
  tableData1: [] as WmInvCountingPlan[],
  // 分页参数
  paginationInfo: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 0
  },
  // 列参数
  columnsInfo1: [
    {
      label: '计划ID',
      name: 'planId',
      field: 'planId',
      align: 'left',
    },
    {
      label: '仓库',
      name: 'whName',
      field: 'whName',
      align: 'left',
    },
    {
      label: '状态',
      name: 'planState',
      field: 'planState',
      align: 'left',
    },
  ],
  // 单选数据
  selected1: [] as WmInvCountingPlan[],
  // 储位X坐标
  xPosition: null as number | null,
  // 盘点数量
  locCount: null as number | null,
  // 盘点储位数量(用户提供)
  countingLocNumber: null as number | null,
  // 默认储位编号
  loc: null as string | null,
  // 单选数据
  selected2: [] as LocCountByXPosition[],
  // 表单数据
  form: {
    planId: null as number | null,
    countingTag: '初盘',
    loc: null,
    palletNo: null,
    lotOrVLot: null as string | null,
    countingQty: null as string | null
  },
  // 是否需要跳过X通道选择，是则跳过步骤2
  stepToSkip: null as number | null,
  // 根据X坐标分组统计储位数量
  locCountByXPositionList: [] as LocCountByXPosition[],
  planId: null as number | null,
  // 库存列表
  invLocInfoForInvCounting: [] as InvLocInfoForInvCounting[],
  // 列参数
  columnsInfo2: [
    {
      label: '储位通道（X）',
      name: 'xPosition',
      field: 'xPosition',
      align: 'left',
    },
    {
      label: '待盘点储位数',
      name: 'locCount',
      field: 'locCount',
      align: 'left',
    },
  ],
  // 料号
  sku: null as string | null,
  // 选择的数量
  invQty: null as number | null
})

// 错误提示
let serverErrorMessage = ref('')
let listDataLoadingState1 = ref(false)
let listDataLoadingState2 = ref(false)
let listDataLoadingState3 = ref(false)
let listDataLoadingState4 = ref(false)

const loadListData1 = () => {
  listDataLoadingState1.value = true
  $f.axios.get<WmInvCountingPlan[]>('/wms/inv/inventory/get-counting-plan-list-for-pda', { params: {countingTag: '初盘'} })
    .then((resp) => {
      $d.selected1 = []
      $d.tableData1 = resp.data
    })
    .catch((err) => {
      playErrorSound()
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState1.value = false
    })
}

const onSelection1 = (selected: WmInvCountingPlan[]) => {
  serverErrorMessage.value = ''
  if (selected.length > 0) {
    $d.countingLocNumber = null
    $d.selected2 = []
    $d.form.loc = null
    $d.form.palletNo = null
    $f.axios.get<NoCountingXPositionLocInfo>('/wms/inv/inventory/get-no-counting-x-position-loc-info-by-plan/' + selected[0].planId)
      .then((resp) => {
        $d.stepToSkip = resp.data.stepToSkip
        $d.locCountByXPositionList = resp.data.locCountByXPositionList
        $d.planId = resp.data.planId
        if ($d.stepToSkip === 3) {
          let params = {
            planId: $d.planId,
            countingTag: '初盘'
          }
          $f.axios.get('/wms/inv/inventory/get-advice-loc-for-counting', {params})
            .then((resp) => {
              $d.loc = resp.data[0].loc
            })
            .catch((err) => {
              playErrorSound()
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
        }
      })
      .catch((err) => {
        $d.stepToSkip = null
        playErrorSound()
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
      .finally(() => {
        listDataLoadingState1.value = false
      })
  }
}

const onNext1 = (stepToSkip: number) => {
  $d.workStep = stepToSkip
}

const onPrevious = () => {
  if ($d.stepToSkip === 3) {
    $d.workStep = 1
  } else {
    $d.workStep = 2
  }
}

const onSelection2 = (selected: LocCountByXPosition) => {
  $d.xPosition = selected[0].xPosition
  $d.locCount = selected[0].locCount
}

const validators = $f.validators
const rules2 = {
  countingLocNumber: {
    required: validators.required
  }
}

const v$2 = useVuelidate(rules2, computed(() => $d), {$autoDirty: true, $scope: false})

const onCountingLocNumberEntered = () => {
  serverErrorMessage.value = ''
  if ($d.countingLocNumber) {
    if ($d.selected2.length > 0) {
      void v$2.value.$validate().then((valRes) => {
        if (valRes) {
          let params = {
            planId: $d.planId,
            xPosition: $d.xPosition,
            countingLocNumber: $d.countingLocNumber
          }
          listDataLoadingState2.value = true
          $f.axios.post('/wms/inv/inventory/allocate-counting-plan-lines', params)
            .then(() => {
              let params2 = {
                planId: $d.planId,
                countingTag: '初盘',
                xPosition: $d.xPosition
              }
              $f.axios.get('/wms/inv/inventory/get-advice-loc-for-counting', {params: params2})
                .then((resp) => {
                  $d.loc = resp.data[0].loc
                  $d.workStep = 3
                })
                .catch((err) => {
                  playErrorSound()
                  serverErrorMessage.value = $f.getAxiosErrMsg(err)
                })
            })
            .catch((err) => {
              playErrorSound()
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() =>{
              listDataLoadingState2.value = false
            })
        }
      })
    } else {
      serverErrorMessage.value = '请先选择储位通道数据'
    }
  }
}
const valResult3 = reactive({
  loc: '',
  palletNo: ''
})
const rules3 = {
  loc: {
    required: validators.required
  },
  palletNo: {
    required: validators.required
  }
}

const v$3 = useVuelidate(rules3, computed(() => $d.form), {$autoDirty: true, $externalResults: valResult3, $scope: false})
// 是否需要显示库存数量
let isNeedShowInvQty = ref(false)
let columnsInfo4 = computed(() => {
  if (isNeedShowInvQty.value) {
    return [
      {
        label: '批号',
        name: 'lot',
        field: 'lot',
        align: 'left',
      },
      {
        label: '外部批号',
        name: 'vLot',
        field: 'vLot',
        align: 'left',
      },
      {
        label: '料号',
        name: 'sku',
        field: 'sku',
        align: 'left',
      },
      {
        label: '库存数量',
        name: 'invQty',
        field: 'invQty',
        align: 'left',
      },
      {
        label: '盘点数量',
        name: 'countingQty',
        field: 'countingQty',
        align: 'left',
      },
    ]
  } else {
    return [
      {
        label: '批号',
        name: 'lot',
        field: 'lot',
        align: 'left',
      },
      {
        label: '外部批号',
        name: 'vLot',
        field: 'vLot',
        align: 'left',
      },
      {
        label: 'LPN',
        name: 'lpn',
        field: 'lpn',
        align: 'left',
      },
      {
        label: '料号',
        name: 'sku',
        field: 'sku',
        align: 'left',
      },
      {
        label: '盘点数量',
        name: 'countingQty',
        field: 'countingQty',
        align: 'left',
      },
    ]
  }
})
// 回车栈板
const onPalletNoEntered = () => {
  // focusHelper.onEntered(2)
  serverErrorMessage.value = ''
  if ($d.form.palletNo) {
    if ($d.form.loc) {
      if ($d.loc === String($d.form.loc).trim()) {
        $d.form.lotOrVLot = null
        $d.form.countingQty = null
        $d.sku = null
        $d.form.planId = $d.planId
        $d.QRCode = ''
        listDataLoadingState3.value = true
        $f.axios.get<InvLocsForCountingReturnInfo>('/wms/inv/inventory/get-inv-locs-for-counting', {params: $d.form})
          .then((resp) => {
            isNeedShowInvQty.value = resp.data.isNeedShowInvQty
            $d.invLocInfoForInvCounting = resp.data.invLocInfoForInvCounting
          })
          .catch((err) => {
            playErrorSound()
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            listDataLoadingState3.value = false
          })
      } else {
        valResult3.loc = '储位编号不一致'
      }
    } else {
      valResult3.loc = '储位是必须的'
    }
  } else {
    valResult3.palletNo = '栈板是必须的'
  }
}

//按钮提交加载
let submittingState = ref(false)
const onCompleteCountingWarning = () => {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: `是否确认对储位${$d.form.loc}、栈板${$d.form.palletNo}完成盘点？`,
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn)=> {
    if (btn === 'ok') {
      $f.ui.closeMsgBox()
      onCompleteCounting()
    }
  })
}
// 完成盘点
const onCompleteCounting = () => {
  serverErrorMessage.value = ''
  submittingState.value = true
  $f.axios.post('/wms/inv/inventory/complete-counting-by-pda', $d.form)
    .then(() => {
      $f.ui.showNotifySucceeded(`储位${$d.form.loc}栈板${$d.form.palletNo}盘点完成`)
      playBeepSound()
      $d.workStep = 3
      $d.invLocInfoForInvCounting = []
      $d.form.loc = null
      $d.form.palletNo = null
      let params = {
        planId: $d.planId,
        countingTag: '初盘',
        xPosition: $d.xPosition
      }
      $f.axios.get('/wms/inv/inventory/get-advice-loc-for-counting', {params})
        .then((resp) => {
          if (resp.data) {
            $d.loc = resp.data[0].loc
          } else {
            $d.workStep = 1
            // 清空所有值
            loadListData1()
            $d.planId = null
            $d.selected2 = []
            $d.locCountByXPositionList = []
            $d.xPosition = null
            $d.locCount = null
            $d.countingLocNumber = null
            $d.loc = null
            $d.form.planId = null
            $d.QRCode = ''
          }
        })
        .catch((err) => {
          if ($f.getAxiosErrMsg(err) === '库存盘点计划状态为“已盘点”或“已取消”状态，无需进行盘点') {
            $d.workStep = 1
            // 清空所有值
            loadListData1()
            $d.planId = null
            $d.selected2 = []
            $d.locCountByXPositionList = []
            $d.xPosition = null
            $d.locCount = null
            $d.countingLocNumber = null
            $d.loc = null
            $d.form.planId = null
          } else {
            playErrorSound()
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          }
        })
    })
    .catch((err) => {
      playErrorSound()
      serverErrorMessage.value = $f.getAxiosErrMsg(err)
    })
    .finally(() => {
      submittingState.value = false
    })
}

const lotOrVLot = ref<QInput | null>(null)
const countingQty = ref<QInput | null>(null)
const qrCode = ref<QInput | null>(null)
// 获取料号状态
let getSkuState = ref(false)
const valResult4 = reactive({
  lotOrVLot: '',
  countingQty: '',
  QRCode: ''
})
const rules4 = {
  lotOrVLot: {
    alwaysRight: validators.alwaysRight
  },
  countingQty: {
    int32: validators.int32,
    greater_equal_than: validators.greaterThan(0),
  },
  QRCode: {
    alwaysRight: validators.alwaysRight
  },
}

const v$4 = useVuelidate(rules4, computed(() => $d.form as any), {$autoDirty: true, $externalResults: valResult4, $scope: false})

const valResult5 = reactive({
  QRCode: ''
})
const rules5 = {
  QRCode: {
    alwaysRight: validators.alwaysRight
  },
}

const v$5 = useVuelidate(rules5, computed(() => $d), {$autoDirty: true, $externalResults: valResult5, $scope: false})


// 回车数量
const onCountingQtyEntered = () => {
  // focusHelper.onEntered(4)
  serverErrorMessage.value = ''
  if ($d.form.countingQty) {
    if ($d.form.lotOrVLot) {
      void v$4.value.$validate().then((valResult) => {
        if (valResult) {
          listDataLoadingState4.value = true
          $f.axios.post('/wms/inv/inventory/do-counting-by-pda', $d.form)
          .then(() => {
            $f.ui.showNotifySucceeded($d.form.lotOrVLot + '盘点成功')
            playSuccessSound()
            $d.form.lotOrVLot = null
            $d.form.countingQty = null
            $d.sku = null
            if ($d.isQREnter) {
              void nextTick(() => {
                qrCode.value && qrCode.value.focus()
              })
            } else {
              void nextTick(() => {
                lotOrVLot.value && lotOrVLot.value.focus()
              })
            }

            onPalletNoEntered()
          })
          .catch((err) => {
            playErrorSound()
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            listDataLoadingState4.value = false
          })
        }
      })
    } else {
      valResult4.lotOrVLot = '批号或外部批号是必须的'
    }
  } else {
    valResult4.countingQty = '数量是必须的'
  }
}

const onLotOrVLotEntered = () => {
  serverErrorMessage.value = ''
  let params = {
    planId: $d.planId,
    lotOrVLot: $d.form.lotOrVLot
  }
  getSkuState.value = true
  $f.axios.get<string>('/wms/inv/inventory/get-sku-by-lot-or-vlot-for-counting', {params})
    .then((resp) => {
      $d.sku = resp.data
      // 查找
      let lotOrVLotFilter = _.filter($d.invLocInfoForInvCounting, (o) => {
        return (o.lot === String($d.form.lotOrVLot).trim()) || (o.vLot === String($d.form.lotOrVLot).trim())
      })
      if (lotOrVLotFilter.length > 0) {
        $d.invQty = lotOrVLotFilter[0].invQty - (lotOrVLotFilter[0].countingQty ? lotOrVLotFilter[0].countingQty : 0)
      }
      focusHelper.onEntered(3)
    })
    .catch((err) => {
      $d.sku = null
      valResult4.lotOrVLot = $f.getAxiosErrMsg(err)
      void nextTick(() => {
        lotOrVLot.value && lotOrVLot.value.focus()
      })
    })
    .finally(() => {
      getSkuState.value = false
    })
}

const deQRCode = () => {
  $d.form.countingQty = null
  $d.form.lotOrVLot = null
  $d.sku = null
  if ($d.QRCode) {
    let codeList = $d.QRCode.split('/')
    if (codeList) {
      if (codeList.length >= 4) {
        $d.form.countingQty = codeList[1]
        $d.form.lotOrVLot = codeList[3]
        onLotOrVLotEntered()
        $d.isQREnter = true
      } else {
        valResult5.QRCode = '扫码错误'
      }
    } else {
      valResult5.QRCode = '扫码错误'
    }
  } else {
    void nextTick(() => {
      lotOrVLot.value && lotOrVLot.value.focus()
    })
  }
}

loadListData1()
const focusHelper = useFocusNextHelper()
focusHelper.regRef(lotOrVLot, 3)
focusHelper.regRef(countingQty, 4)

const fx = $f
const e$ = $f.getFieldErrStr
</script>
